import { Layout, Nav } from '@douyinfe/semi-ui';
import { IconHome, IconHistogram, IconSetting } from '@douyinfe/semi-icons';
import { useHistory } from "react-router-dom";

function Sider() {
  const { Sider } = Layout;
  let history = useHistory();

  function handleSiderSelect({ itemKey }) {
    let route = '';
    switch(itemKey) {
      case 'home':
        route = '/';
        break;
      default:
        route = '/'+itemKey;
    }
    history.push(route)
  }
  return (
    <Sider>
      <Nav
        defaultSelectedKeys={['Home']}
        style={{ maxWidth: 220, height: '100%' }}
        header={{
            logo: <img src="//lf1-cdn-tos.bytescm.com/obj/ttfe/ies/semi/webcast_logo.svg" />,
            text: '体验Semi',
        }}
        footer={{
            collapseButton: true,
        }}
        onSelect={handleSiderSelect}
      >
        <Nav.Item itemKey={'home'} text={'首页'}  icon={<IconHome />} />
        <Nav.Item itemKey={'about'} text={'关于'} icon={<IconHistogram />} />
        <Nav.Item itemKey={'setting'} text={'设置'} icon={<IconSetting />} />
      </Nav>
    </Sider>
  )
}

export default Sider;